<template>
    <div class="page-container">
        <!-- 顶部标题区 -->
        <div class="container-header">
            <header-title title="能耗分析" @refresh="" @export=""/>
            <TimeTabs @change="" :tabs="tabs" :item-style="{
                width: '25%',
                textAlign: 'center',
                backgroundColor: '#fff',
                padding: '12px 0'}"></TimeTabs>
        </div>
        <div class="main-content">
            <div class="energy-section">
                <div class="section-header">
                    <h2>能耗统计</h2>
                    <div class="section-tabs">
                        <TimeTabs @change=""></TimeTabs>
                        <TimeTabs @change="" :tabs="compareTabs"></TimeTabs>
                        <TimeTabs @change="" :tabs="iconTabs"></TimeTabs>
                    </div>
                </div>
            </div>

            <el-form
                ref="queryFormRef"
                :inline="true"
                label-suffix="："
                :model="queryParams"
                class="query-form"
                label-width="98px"
            >
                <el-form-item label="统计周期">
                    <el-select v-model="queryParams.region" placeholder="活动区域" class="max-wpx-9">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择日期">
                    <el-date-picker
                        v-model="queryParams.value1"
                        type="datetimerange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-checkbox v-model="queryParams.checked" style="margin-left: 20px">范围选择</el-checkbox>
                </el-form-item>
                <br/>
                <el-form-item label="能耗分类">
                    <el-select v-model="queryParams.region" placeholder="能耗分类" class="max-wpx-9">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="能耗分类">
                    <el-select v-model="queryParams.region" placeholder="能耗分类">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="能源分项">
                    <el-input v-model="queryParams.name"></el-input>
                </el-form-item>
                <el-form-item label="统计对象">
                    <el-input v-model="queryParams.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleQuery" type="primary" class="search-icon">
                        <svg-icon icon-class="search-icon"/>
                        搜索
                    </el-button>
                    <el-button @click="resetQuery" class="reset-icon">
                        <svg-icon icon-class="reset-icon"/>
                        重置
                    </el-button>
                </el-form-item>
            </el-form>

            <div class="price-box">
                <div class="price-group" v-for="item in statisticsCards" :key="item.label">
                    <div class="price-header">
                        <span class="price-icon" :style="{backgroundColor:item.color}"></span>
                        <span>{{ item.label }}</span>
                    </div>
                    <span class="price-value">0.5224 元 <span>/kWh</span></span>
                </div>
            </div>

            <EnergyChart></EnergyChart>
        </div>

        <div class="main-content">
            <div class="energy-section">
                <div class="section-header">
                    <h2>表格</h2>
                    <div class="section-tabs">
                        <el-button type="default" @click="handleExport">
                            导出
                            <svg-icon :icon-class="'export'" size="10"></svg-icon>
                        </el-button>
                    </div>
                </div>
            </div>

            <el-form
                ref="queryFormRef"
                :inline="true"
                label-suffix="："
                :model="queryTable"
                class="query-form query-table"
                label-width="100px"
            >
                <div>
                    <el-form-item label="能耗分类">
                        <el-select v-model="queryTable.region" placeholder="活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="能耗用途">
                        <el-select v-model="queryTable.region" placeholder="能耗分类">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div>
                    <el-form-item label="能耗分类">
                        <el-select v-model="queryParams.region" placeholder="统计周期">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择日期">
                        <el-date-picker
                            v-model="queryTable.value1"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                        <el-checkbox v-model="queryParams.checked" style="margin-left: 20px">范围选择</el-checkbox>
                    </el-form-item>
                </div>
            </el-form>

            <div class="content-table">
                <el-table :data="tableData" style="width: 100%;"
                          :header-cell-style="{ fontSize: '12px', backgroundColor: '#DFE6EC',color:'#606266',textAlign: 'center' }"
                >
                    <el-table-column label="时间" align="center" prop="alertName"/>
                    <el-table-column label="用电量 ( kWh )" align="center" prop="serialNumber"/>
                    <el-table-column label="去年同期 ( kWh )" align="center" prop="serialNumber"/>
                    <el-table-column label="空压机用电 ( kWh )" align="center" prop="serialNumber"/>
                    <el-table-column label="空调用电 ( kWh )" align="center" prop="deviceName"/>
                    <el-table-column label="吸干机用电 ( kWh )" align="center" prop="deviceName"/>
                    <el-table-column label="真空机用电 ( kWh )" align="center" prop="deviceName"/>
                </el-table>

                <div class="table-pagination">
                    <el-pagination
                        :current-page="pagination.currPage"
                        :page-size="pagination.pageSize"
                        :page-sizes="pagination.pageSizes"
                        :total="pagination.totalPage"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TimeTabs from '@/components/TimeTabs/index.vue'
import HeaderTitle from "@/components/headerTitle/index.vue";
import EnergyChart from "@/components/EnergyChart/index.vue";

export default {
    components: {EnergyChart, HeaderTitle, TimeTabs},
    data() {
        return {
            tabs: [
                {key: 'today', label: '区域'},
                {key: 'month', label: '部门'},
                {key: 'quarter', label: '支路'},
                {key: 'year', label: '维度'}
            ],
            compareTabs: [
                {key: 'today', label: '同比'},
                {key: 'month', label: '环比'},
            ],
            iconTabs: [
                {key: 'today', svg: 'icons1'},
                {key: 'month', svg: 'icons2'},
                {key: 'year', svg: 'icons3'},
            ],
            queryParams: {},
            statisticsCards: [
                {color: '#1EC7FF', label: '总用电量'},
                {color: '#13C998', label: '去年同期用电量'},
                {color: '#907CFF', label: '同比增长率'},
            ],
            queryTable: {},
            tableData: [],
            pagination:{
                pageSize: 10,
                currPage: 1,
                totalPage:0,
                pageSizes:[10,20,30]
            }
        }
    },
    methods: {
        handleQuery() {

        },
        resetQuery() {

        },
        handleSizeChange(){

        },
        handleCurrentChange(){

        }
    }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
